import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Modal, Select, Row, Col, InputNumber } from 'antd'
import { adminCompanyAccoutType } from 'utils/seletLocalData'
import { SelectProps, findValueByKey,strSplit } from 'utils'
import style from '../../components/Card/card.less'
import TableCard from '../../components/TableCard'

const FormItem = Form.Item
const Option = Select.Option
const { TextArea } = Input

const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
}
const formItemLayoutUpdate = {
  labelCol: {
    span: 3,
  },
  wrapperCol: {
    span: 21,
  },
}

const modal = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  optionData,
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      const formData = getFieldsValue()
      if (errors) {
        return
      }
      const data = modalProps.title === 'Create' ? {
        ...getFieldsValue(),
        id: item.id || 1,
      } : {
        ...item,
        memo: formData.memo,
        id: item.id || 1,
      }
      data.accountNumber = strSplit(data.accountNumber)
      // data.address = data.address.join(' ')
      onOk(data)
    })
  }
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  const accountTypeOption = adminCompanyAccoutType.map(d => <Option key={d.key}>{d.value}</Option>)
  const currenciesOption = optionData.currenciesData.map(d => <Option key={d.code}>{d.code}</Option>)
  const tableProps = {
    dataSource: {
      ...item,
    },
    blocks: [
      {
        title: 'AccountName',
        key: 'name',
      },
      {
        title: 'AccountNumber',
        key: 'accountNumber',
      },
      {
        title: 'CurrencyCode',
        key: 'currencyCode',
      },
      {
        title: 'Type',
        key: 'type',
        dictList: adminCompanyAccoutType,
      },
      {
        title: 'Bank',
        key: 'bankName',
      },
      {
        title: 'SwiftCode',
        key: 'swiftCode',
      },
      {
        title: 'StartBalance',
        key: 'startBalance',
      },
      {
        title: ' AccountInformation',
        key: 'accountInformation',
      },
      {
        title: 'Amount',
        key: 'amount',
      },
      {
        title: 'CustomerAmount',
        key: 'customerAmount',
      },
    ],
    cols: 2,
    rows: 5,
  }
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        {(modalProps.title === 'Update' ? (
          <div>
            <Row >
              <Col>
                <TableCard {...tableProps} />
              </Col>
            </Row>
            <Row type="flex" justify="start">
              <Col span={12}>
                <FormItem label="Other" hasFeedback {...formItemLayoutUpdate}>
                  {getFieldDecorator('memo', {
                    initialValue: item.memo,
                  })(<TextArea rows={1} />)}
                </FormItem>
              </Col>
            </Row>
          </div>
        ) : (
          <div>
            <Row>
              <Col span={12}>
                <FormItem label="AccountName" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('name', {
                    initialValue: item.name,
                    rules: [
                      {
                        required: true,
                      },
                    ],
                  })(<Input />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="AccountNumber" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('accountNumber', {
                    initialValue: item.accountNumber,
                    rules: [
                      {
                        required: true,
                      },
                    ],
                  })(<Input />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem label="CurrencyCode" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('currencyCode', {
                    initialValue: item.currencyCode,
                    rules: [
                      {
                        required: true,
                      },
                    ],
                  })(<Select style={{ width: '100%' }} {...SelectProps}>{currenciesOption}</Select>)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="Type" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('type', {
                    initialValue: item.type,
                    rules: [
                      {
                        required: true,
                      },
                    ],
                  })(<Select style={{ width: '100%' }}>{accountTypeOption}</Select>)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem label="Bank" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('bankName', {
                    initialValue: item.bankName,
                  })(<Input />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="StartBalance" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('startBalance', {
                    initialValue: item.startBalance,
                  })(<InputNumber style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem label="SwiftCode" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('swiftCode', {
                    initialValue: item.swiftCode || '',
                  })(<Input />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="AccountInformation" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('accountInformation', {
                    initialValue: item.accountInformation,
                  })(<TextArea rows={1} />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem label="Other" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('memo', {
                    initialValue: item.memo,
                  })(<TextArea rows={1} />)}
                </FormItem>
              </Col>
            </Row>
          </div>)
        )}
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
  optionData: PropTypes.object,
}

export default Form.create()(modal)
